<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>松下疯狂抽好礼</title>

    <link rel="stylesheet" href="../../../../assets/css/lottery/style.css">
</head>

<body style="background:#FADC3C;overflow-x:hidden;">

    <div id="policy" class="modal-overlay">
        <img class="close-button" src="../../../../assets/image/lottery/icon-close.png" />
        <div class="rule-area">
            <h3>活动规则</h3>
            <p>
                根据提示参加完满额买赠活动即自动进入微信抽奖页面，中奖结果以页面实时显示的中奖结果为准。 单张发票仅能参与一次抽奖活动，如多次参与则以第一次抽奖结果为准。
            </p>

            <h4>奖品配送方式：</h4>
            <p>根据用户参与该活动时留存一致的姓名，电话号码，地址发送礼品。配送礼品的快递公司由松下指定。</p>

            <h4>奖品配送时间：</h4>
            <p>顾客上传信息经过工作人员审核通过后的15个工作日内发出。</p>

            <h4>活动须知：</h4>
            <ol style="padding-left: 1rem; font-size: 10px;">
                <li>凡参与本活动，均视为已阅读并同意本活动细则。</li>
                <li>所有奖品金额均符合『中华人民共和国反不正当竞争法』中相关规定。</li>
                <li>参与活动者在领取、使用礼品过程中发生任何之伤害与损失，该等伤害非因主办方过失导致，主办方不承担任何责任。</li>
                <li>若发现有用户利用不正当手段参与活动，活动主办方有权在事先通知的前提下，取消其活动资格。</li>
                <li>活动主办方不为个人之网络问题而导致参与活动者之权益损失承担任何责任。</li>
                <li>参与活动者提供收件地址信息有误、联系方式有误、提供虚假凭证、逾期兑奖等情形，皆视为参与者放弃领奖资格与由此引申权利。</li>
                <li>本活动网站仅为用户提供网络互动式平台体验服务，用户不得利用本网站发布侮辱与攻击性言语、不得侵犯他人隐私、不得发布任何违法内容，任何由用户发布、参与互动内容、及传播结果而来的法律责任，由用户自行承担。</li>
                <li>本次活动的最终解释权归松下电器（中国）有限公司上海分公司所有。如对活动有任何疑问，请联系松下电器生活沙龙官方微信。</li>
            </ol>
        </div>
    </div>

    <div id="result" class="modal-overlay" style="width:100%;">

    </div>




    <div style="text-align: center">
        <img src="../../../../assets/image/lottery/share_tip.png" style="width:100%" />
        <img src="../../../../assets/image/lottery/head-image.png" id="head-image" alt="" />
    </div>

    <img src="../../../../assets/image/lottery/1.png" id="shan-img" style="display:none;" />
    <img src="../../../../assets/image/lottery/2.png" id="sorry-img" style="display:none;" />

    <img src="../../../../assets/image/lottery/prize/0-xcq.png" id="xcq-img" style="display:none;" />
    <!-- 特等奖 -->
    <img src="../../../../assets/image/lottery/prize/1-dcf.png" id="dcf-img" style="display:none;" />
    <!-- 一等奖 -->
    <img src="../../../../assets/image/lottery/prize/2-zpg.png" id="zpg-img" style="display:none;" />
    <!-- 二等奖 -->
    <img src="../../../../assets/image/lottery/prize/3-ydh.png" id="ydh-img" style="display:none;" />
    <!-- 三等奖 -->
    <img src="../../../../assets/image/lottery/prize/4-awj.png" id="awj-img" style="display:none;" />
    <!-- 安慰奖 -->
    <img src="../../../../assets/image/lottery/prize/5-mjp.png" id="mjp-img" style="display:none;" />
    <!-- 谢谢参与 -->

    <div class="banner">
        <div class="turnplate">
            <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
            <img class="pointer" src="../../../../assets/image/lottery/turnplate-pointer.png" />
        </div>
    </div>

    <img src="../../../../assets/image/lottery/foot-image.png" id="foot-image">

    <script type="text/javascript" src="../../../../assets/js/lottery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="../../../../assets/js/lottery/awardRotate.js"></script>
    <script type="text/javascript" src="../../../../assets/js/lottery/self.js"></script>
    <script src="../../../../assets/js/social_share.v2.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>


    <script type="text/javascript">
        jQuery(document).ready(function($) {
            if (window.history && window.history.pushState) {
                // window.history.pushState('forward', null, '/pana-campaigns/pages/portal.html');
                window.history.pushState('forward', null, location.href.split('#')[0]);
                $(window).on('popstate', function() {
                    console.log('Back button was pressed.');
                    window.location = "/pana-campaigns/pages/portal.html?v=" + Math.random().toString(36).substring(7);
                });
            }
        });

        $('body').bind('touchmove', function(ev) {
            ev.preventDefault();
        });

        $("*").dblclick(function(e) {
            e.preventDefault();
        });

        // 活动规则浮层的显示和关闭
        $("#head-image").click(function() {
            $("#policy").fadeIn(200);
        });

        $(".close-button").click(function() {
            $("#policy").fadeOut(100);
        });

        $("#result").click(function() {
            $("#result").fadeOut(100);
        });

        // 检查页面 cookie 参数
        var uuid = getUrlParameter('uuid');
        console.log("uuid:\t" + uuid);

        // 初始化微信分享参数
        $.ajax({
            type: 'get',
            dataType: 'json',
            url: '/pana-BE-RESTful/wx/init',
            data: {
                'currentUrl': location.href.split('#')[0]
            },
            success: function(data) {
                window.myShareData = data.result;
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: myShareData.appid, // 必填，公众号的唯一标识
                    timestamp: myShareData.timestamp, // 必填，生成签名的时间戳
                    nonceStr: myShareData.noncestr, // 必填，生成签名的随机串
                    signature: myShareData.signature, // 必填，签名，见附录1
                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });

                wx.ready(function() {

                    var success_callback = function() {
                        $.get("/pana-BE-RESTful/lottery/share", "uuid=" + uuid);
                    }

                    wx.onMenuShareTimeline({
                        title: titleText, // 分享标题
                        link: shareUrl,
                        imgUrl: imageUrl, // 分享图标
                        success: success_callback,
                        cancel: function() {}
                    });

                    wx.onMenuShareAppMessage({
                        title: titleText, // 分享标题
                        desc: descriptionText, // 分享描述
                        link: shareUrl,
                        imgUrl: imageUrl, // 分享图标
                        success: success_callback,
                        cancel: function() {}
                    });
                });

                wx.error(function(res) {
                    console.log(res);
                });
            }
        });


        var turnplate = {
            restaraunts: [], //大转盘奖品名称
            colors: [], //大转盘奖品区块对应背景颜色
            outsideRadius: 192, //大转盘外圆的半径
            insideRadius: 68, //大转盘内圆的半径
            textRadius: 155, //大转盘奖品位置距离圆心的距离

            startAngle: 0, //开始角度

            bRotate: false //false:停止;ture:旋转
        };

        $(document).ready(function() {
            // $(".modal-overlay").hide();
            //动态添加大转盘的奖品与奖品区域背景颜色
            turnplate.restaraunts = ["松下美容仪", "谢谢参与", "松下电动牙刷", "松下电吹风", "高档自拍杆", "谢谢参与"];
            turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];

            var rotateTimeOut = function() {
                $('#wheelcanvas').rotate({
                    angle: 0,
                    animateTo: 2160,
                    duration: 8000,
                    callback: function() {
                        alert('网络超时，请检查您的网络设置！');
                    }
                });
            };

            //旋转转盘 item:奖品位置; txt：提示语;
            var rotateFn = function(item, txt) {
                var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
                if (angles < 270) {
                    angles = 270 - angles;
                } else {
                    angles = 360 - angles + 270;
                }
                $('#wheelcanvas').stopRotate();
                $('#wheelcanvas').rotate({
                    angle: 0,
                    animateTo: angles + 1800,
                    duration: 8000,
                    callback: function() {
                        // alert(txt);
                        turnplate.bRotate = !turnplate.bRotate;

                        $("#result").removeClass().addClass("modal-overlay");

                        if (txt == "松下美容仪") {
                            $("#result").addClass("hit_XCQ").fadeIn(200);
                        }

                        if (txt == "松下电动牙刷") {
                            $("#result").addClass("hit_DCF").fadeIn(200);
                        }

                        if (txt == "松下电吹风") {
                            $("#result").addClass("hit_RSH").fadeIn(200);
                        }

                        if (txt == "高档自拍杆") {
                            $("#result").addClass("hit_ZPG").fadeIn(200);
                        }

                        if (txt == "谢谢参与") {
                            $("#result").addClass("miss").fadeIn(200);
                        }
                    }
                });
            };

            $('.pointer').click(function() {
                if (turnplate.bRotate) return;
                turnplate.bRotate = !turnplate.bRotate;
                //获取随机数(奖品个数范围内)

                $.ajax({
                    url: '/pana-BE-RESTful/lottery/draw',
                    type: 'GET',
                    data: "uuid=" + uuid,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {},
                    success: function(data) {
                        console.log(data);

                        if (data.ret == 0) { // 如果结果不正常
                            // rotateFn(item + 1, turnplate.restaraunts[item]);
                            // alert(data.message);
                            $("#result").removeClass().addClass("modal-overlay");
                            $("#result").addClass("out_chance").fadeIn(200);

                            turnplate.bRotate = !turnplate.bRotate;

                        } else { // 如果结果正常的话
                            var item = data.result;
                            rotateFn(item + 1, turnplate.restaraunts[item]);
                        }

                        return false;
                    },
                    error: function() {},
                    complete: function() {
                        // console.log(item);
                    }
                });

            });
        });

        //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
        window.onload = function() {
            $.get("/pana-BE-RESTful/lottery/list", function(data, status, xhr) {
                if (status != 'success' || data.ret == 0) {
                    console.log("初始化 uuid 信息失败");
                } else {
                    console.log("Data: " + data.message + "\nStatus: " + status);

                    turnplate.restaraunts = data.result;
                }

                drawRouletteWheel();
            });
        };

        function drawRouletteWheel() {
            var canvas = document.getElementById("wheelcanvas");
            if (canvas.getContext) {
                //根据奖品个数计算圆周角度
                var arc = 2 * Math.PI / turnplate.restaraunts.length;
                var canvasWidth = 422;
                var canvasHeight = 422;

                var context = canvas.getContext("2d");
                context.clearRect(0, 0, canvasWidth, canvasHeight); //在给定矩形内清空一个矩形
                context.strokeStyle = "#FFBE04"; //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
                context.font = '20px Microsoft YaHei'; //font 属性设置或返回画布上文本内容的当前字体属性

                for (var i = 0; i < turnplate.restaraunts.length; i++) {
                    var angle = turnplate.startAngle + i * arc;

                    // 绘制背景色
                    context.fillStyle = turnplate.colors[i];
                    context.beginPath();

                    var circleCenterX = canvasWidth / 2;
                    var circleCenterY = canvasHeight / 2;
                    context.arc(circleCenterX, circleCenterY, turnplate.outsideRadius, angle, angle + arc, false);
                    context.arc(circleCenterX, circleCenterY, turnplate.insideRadius, angle + arc, angle, true);
                    context.stroke();

                    context.fill();
                    context.save(); //锁画布(为了保存之前的画布状态)

                    //----绘制奖品开始----
                    context.fillStyle = "#E5302F";

                    var text = turnplate.restaraunts[i];
                    var line_height = 20;

                    //translate方法重新映射画布上的 (0,0) 位置
                    context.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);

                    //rotate方法旋转当前的绘图
                    context.rotate(angle + arc / 2 + Math.PI / 2);

                    /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
                    var maxTextLength = 8;
                    if (text.length > maxTextLength) { //奖品名称长度超过一定范围
                        text = text.substring(0, maxTextLength) + "||" + text.substring(maxTextLength);
                        var texts = text.split("||");
                        for (var j = 0; j < texts.length; j++) {
                            context.fillText(texts[j], -context.measureText(texts[j]).width / 2, j * line_height);
                        }
                    } else {
                        context.fillText(text, -context.measureText(text).width / 2, 0);
                    }

                    var prizeImageMap = {
                        "松下美容仪": "xcq-img",
                        "松下电动牙刷": "dcf-img",
                        "松下电吹风": "zpg-img",
                        "高档自拍杆": "ydh-img",
                        "免费流量包": "awj-img",
                        "谢谢参与": "mjp-img"
                    };

                    var img = document.getElementById(prizeImageMap[text.replace("||", "")]);
                    img.onload = function() {
                        context.drawImage(img, -25, 20);
                    };

                    context.drawImage(img, -25, 20);

                    //把当前画布返回（调整）到上一个save()状态之前
                    context.restore();
                    //----绘制奖品结束----
                }
            }
        }
    </script>

</body>

</html>